<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Flip Clock prototype</title>
	
	<link rel="stylesheet" href="./css/flip-clock.css" type="text/css" media="screen" charset="utf-8" />
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	
	<script type="text/javascript" src="./js/flip-clock.js"></script>
	
	
	<link rel="stylesheet" href="./js/flipclock/files/css/flipclock.css" type="text/css" media="screen" charset="utf-8" />
	
	
</head>
<body onLoad="startclock();">

<div id="clock">12/24/2009 12:00:00</div>

<script type="text/javascript">

var timerID = null;
var timerRunning = false;
var id,pause=0,position=0;

function stopclock (){
        if(timerRunning)
                clearTimeout(timerID);
        timerRunning = false;
}

function showtime () {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds()
        var timeValue = "" + ((hours >12) ? hours -12 :hours)
        timeValue += ((minutes < 10) ? ":0" : ":") + minutes
        timeValue += ((seconds < 10) ? ":0" : ":") + seconds
        timeValue += (hours >= 12) ? " P.M." : " A.M."
        
        if (document.getElementById("clock").innerHTML != timeValue) {
	        document.getElementById("clock").innerHTML = timeValue;
	        
	        hours   = ( hours   > 12) ? hours -12 : hours;
	        minutes = ((minutes < 10) ? "0" : "") + minutes;
	        seconds = ((seconds < 10) ? "0" : "") + seconds;
	        
	//        document.getElementById("flip-clock-hou").innerHTML = hours;
	//        document.getElementById("flip-clock-min").innerHTML = minutes;
	        
	        document.getElementById("flip-clock-sec1").innerHTML = seconds;
	        upgradeSeconds(1);
	        setTimeout("upgradeSeconds(2)", 30);
	        setTimeout("upgradeSeconds(3)", 60);
	        setTimeout("upgradeSeconds(4)", 90);
        
        }
        timerID = setTimeout("showtime()",1000);
        timerRunning = true;
}
function upgradeSeconds(phase) {
	switch (phase) {
		case 1:
				var flipMain = document.getElementById('flip-clock-sec-main');
				flipMain.className = flipMain.className + " animation-1";
				break;
				
		case 2:
				var flipMain = document.getElementById('flip-clock-sec-main');
				flipMain.className = flipMain.className.replace("animation-1", "animation-2");
				break;
				
		case 3:
				var flipMain = document.getElementById('flip-clock-sec-main');
				flipMain.className = flipMain.className.replace("animation-2", "animation-3");
				break;
				
		case 4:	
				var flipMain = document.getElementById('flip-clock-sec-main');
				flipMain.className = flipMain.className.replace("animation-3", "");
				
				document.getElementById('flip-clock-sec2').innerHTML = document.getElementById('flip-clock-sec1').innerHTML;
				break;

	}
}
function startclock () {
        stopclock();
        showtime();
}
// --End Hiding Here -->


</script>

<style type="text/css">
.crome-clock {
	background: transparent url(./img/chrome-clock-left.png) no-repeat left top;
	padding-left: 48px;
	
	display: inline-block;
	height: 113px;
}
.crome-clock .crome-clock-wr2 {
	background: transparent url(./img/chrome-clock-right.png) no-repeat right top;
	padding: 0 48px 0 0;
	
	display: inline-block;
	height: 113px;

}
.crome-clock .crome-clock-wr3 {
	background: transparent url(./img/chrome-clock-center.png) repeat-x left top;
	padding: 0;
	
	display: inline-block;
	height: 113px;
}

.crome-clock .crome-clock-wr4 {
	color: white;
	position: relative;
	top: 20px;
	margin-left: -44px;
	left: 22px;
	
	display: inline-block;
}
.crome-clock .flipclock-plate-c {
	width: 62px;
}
</style>

	<span class="crome-clock">
		<span class="crome-clock-wr2">
			<span class="crome-clock-wr3">
				<span class="crome-clock-wr4">
				
	<span class="flipclock-plate flipclock-plate-min" style="margin-right: -2px;">
		<span class="flipclock-plate-r">
			<span class="flipclock-plate-c">
				<strong class="flipclock-plate-upper">12</strong>
				<strong class="flipclock-plate-lower">12</strong>
				<span class="flipclock-plate-blind"></span>
			</span>
		</span>
	</span>
	
	<span class="flipclock-plate flipclock-plate-sec" id="flip-clock-sec-main">
		<span class="flipclock-plate-r">
			<span class="flipclock-plate-c">
				<strong class="flipclock-plate-upper" id="flip-clock-sec1">01</strong>
				<strong class="flipclock-plate-lower" id="flip-clock-sec2">02</strong>
				<span class="flipclock-plate-blind"></span>
			</span>
		</span>
	</span>
				
				</span>
			</span>
		</span>
	</span>

	
	
</body>
</html>